<template>
	<div id="ZhuZhuangTu01"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Column } from '@antv/g2plot'

const data = [
	{
		type: '产废口1',
		sales: 38
	},
	{
		type: '产废口2',
		sales: 52
	},
	{
		type: '产废口3',
		sales: 61
	},
	{
		type: '产废口4',
		sales: 145
	},
	{
		type: '产废口5',
		sales: 48
	}
]

onMounted(() => {
	const columnPlot = new Column('ZhuZhuangTu01', {
		data,
		xField: 'type',
		yField: 'sales',
		label: {
			// 可手动配置 label 数据标签位置
			position: 'middle', // 'top', 'bottom', 'middle',
			// 配置样式
			style: {
				fill: '#FFFFFF',
				opacity: 0.6
			}
		},
		xAxis: {
			label: {
				autoHide: true,
				autoRotate: false
			}
		},
		meta: {
			type: {
				alias: '线路'
			},
			sales: {
				alias: '隐患数'
			}
		},
		minColumnWidth: 20,
		maxColumnWidth: 30,
	})

	columnPlot.render()
})
</script>

<style scoped></style>
